import React, { Component } from 'react';

export default class Results extends Component {
  constructor(props) {
    super(props);
    this.store = this.props.store;
  }

  commonInPercent(percent) {
    let total =
      this.store.getState().angular +
      this.store.getState().react +
      this.store.getState().vuejs;
    console.log('total', total);
    if (percent) {
      return (percent / total * 100).toFixed(2);
    } else {
      return 0;
    }
  }

  voteAngularInPercent() {
    let angular = this.store.getState().angular;
    console.log('angular', angular);
    return this.commonInPercent(angular);
  }

  voteReactInPercent() {
    let react = this.store.getState().react;
    console.log('react', react);
    return this.commonInPercent(react);
  }
  voteVueJsInPercent() {
    let vuejs = this.store.getState().vuejs;
    console.log('vuejs', vuejs);
    return this.commonInPercent(vuejs);
  }

  render() {
    return (
      <div>
        <span className="label label-danger">
          Angular: {this.voteAngularInPercent() + '%'}
        </span>
        <div className="progress">
          <div
            className="progress-bar progress-bar-striped progress-bar-animated"
            role="progressbar"
            aria-valuenow="75"
            aria-valuemin="0"
            aria-valuemax="100"
            style={{
              width: this.voteAngularInPercent() + '%'
            }}
          />
        </div>
        <span className="label label-danger">
          React: {this.voteReactInPercent() + '%'}
        </span>
        <div className="progress">
          <div
            className="progress-bar progress-bar-striped progress-bar-animated"
            role="progressbar"
            aria-valuenow="75"
            aria-valuemin="0"
            aria-valuemax="100"
            style={{
              width: this.voteReactInPercent() + '%'
            }}
          />
        </div>
        <span className="label label-danger">
          Angular: {this.voteVueJsInPercent() + '%'}
        </span>
        <div className="progress">
          <div
            className="progress-bar progress-bar-striped progress-bar-animated"
            role="progressbar"
            aria-valuenow="75"
            aria-valuemin="0"
            aria-valuemax="100"
            style={{
              width: this.voteVueJsInPercent() + '%'
            }}
          />
        </div>
      </div>
    );
  }
}
